<template>
  <div class="header">
    <div class="header-left">
      <div class="title">
        <div class="logo">
          <img src="@/assets/images/bigScreen/top/logo.png" alt="" />
        </div>
        <div class="text">
          新铺镇智慧环卫平台
        </div>
      </div>
    </div>
    <div class="header-center">
      <Center :data="data"></Center>
    </div>
    <div class="header-right">
      <!--      <div class="header-right-item notice">-->
      <!--        <Notice :noticeList="noticeList"></Notice>-->
      <!--      </div>-->
      <!--      <div class="header-right-item warn">-->
      <!--        <Warn :warnList="warnList"></Warn>-->
      <!--      </div>-->
      <div class="header-right-item">
        <!--        <img src="@/assets/images/bigScreen/time.png" alt=""/>-->
        <div class="time-info">
          <div class="time">{{ timeString }}</div>
          <div class="date">{{ date }}</div>
        </div>
      </div>
      <div class="header-right-item setting" @click="onJumpSettting">
        <img src="@/assets/images/bigScreen/setting.png" alt="" />
        <div class="desc">系统管理</div>
      </div>
    </div>
  </div>
</template>

<script>
import Center from "@/views/bigScreen/components/Header/Center.vue";
import Warn from "@/views/bigScreen/components/Header/Warn.vue";
import Notice from "@/views/bigScreen/components/Header/Notice.vue";
export default {
  name: "Header",
  components: {
    Center,
    Warn,
    Notice,
  },
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    warnList: {
      type: Array,
      default: () => [],
    },
    noticeList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      date: '',
      timeString: '',
      animationId: '',
    };
  },
  created() {
    this.date = this.formatCurrentDate();
    this.startAnimation();
  },
  beforeDestroy() {
    this.stopAnimation();
  },
  methods: {
    onJumpSettting() {
      // const currentOrigin = window.location.origin;
      // window.location.href = `${currentOrigin}/#/personnel/manage`;
      this.$router.push({
        name: 'Region',
      });
    },
    formatCurrentDate() {
      const date = new Date();
      const year = date.getFullYear(); // 获取年份
      const month = date.getMonth() + 1; // 获取月份，+1是因为getMonth()返回的月份是从0开始计数的
      const day = date.getDate(); // 获取日期
      const weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      const weekDay = weekDays[date.getDay()]; // 获取星期几

      // 格式化月份和日期，确保是两位数
      const formattedMonth = month < 10 ? '0' + month : month;
      const formattedDay = day < 10 ? '0' + day : day;

      // 组合成所需的格式
      return `${year}/${formattedMonth}/${formattedDay} ${weekDay}`;
    },
    startAnimation() {
      if (!this.animationId) this.updateClock();
    },
    stopAnimation() {
      if (this.animationId) {
        cancelAnimationFrame(this.animationId);
        this.animationId = null;
      }
    },
    updateClock() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');

      const timeString = `${hours}:${minutes}:${seconds}`;
      this.timeString = timeString;

      this.animationId = requestAnimationFrame(this.updateClock);
    }
  },
}
</script>

<style scoped lang="scss">
$paddingT: 16px;

.header {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;

  &-left {
    min-width: 240px;
    flex-shrink: 1;
    display: flex;
    align-items: center;

    .title {
      color: #fff;
      display: flex;
      align-items: center;
      padding-top: $paddingT;
      width: 100%;
      min-width: 0;  /* 允许flex子项收缩 */

      .logo {
        margin-right: 12px;
        flex-shrink: 0;  /* logo不收缩 */
        display: flex;
        align-items: center;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;

        img {
          height: 36px;
          width: 36px;
          object-fit: cover;
          display: block;
        }
      }

      .text {
        font-size: clamp(16px, 1.5vw, 20px);
        font-weight: bolder;
        text-shadow: 0px 0px 5px #00257C;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;  /* 占据剩余空间 */
        min-width: 0;  /* 允许文本在空间不足时被截断 */
        line-height: 1;
        display: flex;
        align-items: center;
      }
    }

  }

  &-center {
    margin-left: 6%;
  }

  &-right {
    display: flex;
    padding-top: $paddingT;

    &-item {
      display: flex;

      img {
        height: 30px;
        object-fit: cover;
        margin-right: 10px;
      }

      .time-info {
        color: #fff;
        font-size: 11px;
        text-align: right;

        .time {
          font-size: 15px;
          font-weight: bold;
          margin-bottom: 6px;
        }
      }

      &.setting {
        text-align: center;
        font-size: 11px;
        color: #fff;
        cursor: pointer;
        display: block;
        margin-left: 10px;

        img {
          height: 22px;
          display: block;
          margin: 0 auto;
        }
      }
    }
  }
}
</style>
